<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>添加营养餐</title>
	<link rel='icon' href='./img/logo.ico' type='image/x-ico' />
	<link rel="stylesheet" href="./css/style.css">

</head>  
<body>   
	<div class="bg">
		<div class="success-box" style="opacity: 0;"></div>
	</div> 
	<div id="add-food-page" class="add-food-page">
		<div class="add-food-box">
			<div class="title">添加你想吃的菜品 一大堆</div>
			<div class="form-box">
				<div class="clearfix">
					<input type="text" name="name" value="" placeholder="食物名称">
					<div class="type">
						<div id="type-tips">- SELECT -</div>
			    		<ul id="type-ul"> 
			    			<li>Breakfast</li>
			    			<li>Lunch</li>
			    			<li>Supper</li>
			    		</ul> 
					</div>  
				</div>
				<button id="add-food-btn" class="food-btn2">添加</button>
			</div> 
		</div>
	</div>
	<ul id="loading">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</body> 
<script src="./js/modifyFood.js"></script>
<script> 
	//添加食物
	document.getElementById('add-food-btn').onclick = function() {
		var name = document.getElementsByName('name')[0].value; 
		if (!name) {
			alert('请输入食物名称');
			return false;
		}
		if (!type) {
			alert('请选择食物类型');
			return false;
		}
		var xmlhttp = new XMLHttpRequest();
		xmlhttp.open("GET", "../api/SetFood.php?name=" + name + "&type=" + type, true);
		xmlhttp.send();
		document.getElementById('add-food-page').style.display = "none";
		document.getElementsByClassName('bg')[0].style.zIndex = "3"; 
		document.getElementById('loading').style.display = 'block'; 
		xmlhttp.onreadystatechange = function() {
			if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
				successSkip("添加成功，正在返回主页...");
			}
		}
	}  
</script>
</html>
